import React, { useState,useEffect } from 'react'
import { SearchBar, Grid, Tag,Tabs } from 'antd-mobile'
import Logo from '../../assets/img/logo2.png'
import Nav from '../../assets/img/nav.png'

import yubuy1 from '../../assets/img/yubuy1.png'
import yubuy2 from '../../assets/img/yubuy2.png'
import yubuy3 from '../../assets/img/yubuy3.png'

import './home.less'
import Newhav from './components/Newhav/Newhav'
import Wanpople from './components/Wanpople/Wanpople'
import Onlytime from './components/Onlytime/Onlytime'
import Goods from './components/Goods/Goods'

import {reqNewhave,reqwantuan,reqtime,reqgoods} from '../../request/api'

 function Home()  {
    const [newhav,setNewhav]=useState([])
    const [wanpople,setWanPople]=useState([])
    const [onlytime,setOnlytime]=useState([])
    const [showGoods,setShowGoods]=useState([])
    const [n,setN]=useState(0)

    useEffect(()=>{
      // 请求新人专享
      reqNewhave().then(res=>{
        if(res.data.code==200){
          setNewhav(res.data.list)
        }
      })
      // 请求万人团
      reqwantuan().then(res=>{
         if(res.data.code==200){
           setWanPople(res.data.list)
         }
      })
      // 限时秒杀
      reqtime().then(res=>{
        if(res.data.code==200){
          setOnlytime(res.data.list)
        }
      })
      // 商品
      reqgoods().then(res=>{
        if(res.data.code==200){
          let arr=res.data.list
           setShowGoods([...arr])
        }
      })
    },[])
    
    return (
      <div>
        <div className='Header'>
          <span className='logo'>
            <img src={Logo} alt="" />
          </span>
          <div className='seach'>
            <SearchBar
              placeholder='请输入内容'

              style={{
                '--border-radius': '100px',
                '--background': '#ffffff',
                '--height': '32px',
                '--padding-left': '12px',
              }}
            />
          </div>
          <div className='icon'>
            <img src={Nav} alt="" />
          </div>
        </div>
       <Newhav newhav={newhav}></Newhav>
       <Wanpople wanpople={wanpople}></Wanpople>
        <Onlytime onlytime={onlytime}></Onlytime>
        <div className='buy'>
        <Tabs
          activeLineMode='fixed'
          style={{
            '--fixed-active-line-width': '20px',
          }}
        >
          <Tabs.Tab title='双十一预购' key='1'>
          <img src={yubuy1} alt="" />
          </Tabs.Tab>
          <Tabs.Tab title='畅购全球' key='2'>
          <img src={yubuy2} alt="" />
          <img src={yubuy3} alt="" />
          </Tabs.Tab>
         
        </Tabs>
        </div>
        <Goods showGoods={showGoods} n={n} changeN={n=>setN(n)}></Goods>
      </div>
    )
  
}

export default Home